<%@page import="java.io.FileReader"%>
<%@page import="java.io.File"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%> 

		
<html>
<head>
<base href="<%=basePath%>">
<title>Blog content page</title>
<style type="text/css">
header,section,footer,aside,nav,article,figure,figcaption {
	display: block;
}

body {
	color: #666666;
	background-color: #f9f8f6;
	background-image: url("images/dark-wood.jpg");
	background-position:center; 
	font-family: Georgia, times, serif;
	line-height: 1.4em;
	background-position:right top;
}

 input {
    padding: 5px;
    margin: 15px;

  }

div.editarea
{
	margin: 20px;
}

button.editbutton
{
	margin: 20px;
}

.wrapper {
	width: 1000px;
	margin: 20px auto 20px auto;
	border: 2px solid #000000;
	background-color: #ffffff;
}

#articlecontent
  {
    background-color: #ddd;
    padding: 20px;
    margin: 20px;
    
  }
  
  #titlegroup
  {
    padding: 10px;
    margin-left: 50%;
    margin-top: 5%;
   }

header {
	height: 160px;
	background-image: url(<%=basePath %>images/header.jpg);
}

h1 {
	text-indent: -9999px;
	width: 940px;
	height: 130px;
	margin: 0px;
}

nav,footer {
	clear: both;
	color: #ffffff;
	background-color: #aeaca8;
	height: 30px;
}

nav ul {
	margin: 0px;
	padding: 5px 0px 5px 30px;
}

nav li {
	display: inline;
	margin-right: 40px;
}

nav li a {
	color: #ffffff;
}

nav li a:hover,nav li a.current {
	color: #000000;
}

section.articles {
	float: left;
	width: 690px;
	border-right: 1px solid #eeeeee;
}

section.comments {
	float:left;
	width: 610;
	
	margin: 10px;
	padding: 10px;
    border-top: 1px solid gray
	
}

article {
	clear: both;
	
	width: 100%;
}

 
hgroup {
	margin-top: 40px;
}

figure {
	float: left;
	width: 290px;
	height: 220px;
	padding: 5px;
	margin: 20px;
	border: 1px solid #eeeeee;
}

figcaption {
	font-size: 90%;
	text-align: left;
}

aside {
	width: 200px;
	float: left;
	padding: 0px 0px 0px 20px;
}

aside section a {
	display: block;
	padding: 10px;
	border-bottom: 1px solid #eeeeee;
}

aside section a:hover {
	color: #985d6a;
	background-color: #efefef;
}

a {
	color: #de6581;
	text-decoration: none;
}

h1,h2,h3 {
	font-weight: normal;
}

h2 {
	margin: 10px 0px 5px 0px;
	padding: 0px;
}

h3 {
	margin: 0px 0px 10px 0px;
	color: #de6581;
}

aside h2 {
	padding: 30px 0px 10px 0px;
	color: #de6581;
}

footer {
	font-size: 80%;
	padding: 7px 0px 0px 20px;
}
</style>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->


				
<script type="text/javascript" src="<%=basePath %>tinymce/js/tinymce/tinymce.min.js"></script>
<script type="text/javascript">
tinymce.init({
    selector: "textarea"
 });
</script>

</head>
<body>
	<div class="wrapper">
		<header>
			<h1>Blog page</h1>
			<nav>
				<ul>
					<li><a href="" class="current">home</a></li>
					<li><a href="#contact">contact</a></li>
				</ul>
			</nav>
		</header>
		
		<form action="articles" method="post">
		<section class="articles">
			<div class="editarea">
				Title:
				&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" name="title" value="Frank"  size="85"/>
				<br />
				Author: 
				<input type="text" name="name" value="${user.name}" size="85"/>
			
			   <p> Article Content: </p>
	       	   <textarea cols="78" rows="30" id="content" name="content" ></textarea>
	    		<br />
	       	   <button type="submit"  id="addbutton" name="addbutton" >Add</button>
	     	</div>
	     	</section>
	     </form>
		
		<aside>
			<section class="contact-details" id="contact">
				<h2>Contact</h2>
				<p>
					EA's Final Project<br /> @Author <br /> Zheng <br />
					Xiaofei
				</p>
			</section>
		</aside>
		
		<footer> &copy; 2013 EA's Final Project: Blog </footer>
	</div>
	<!-- .wrapper -->
</body>
</html>